<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>抢到的任务</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        body{background-color: #eeedf3;}
        .switch{position: relative;font-size: 15px;text-align: center;color: #333;overflow: hidden;background-color: #fff;}
        .switch .item{float: left;width: 50%;line-height: 50px;}
        .switch .b-border{position: absolute;left: 0;bottom: 0;width: 50%;height: 3px;
            background-color: #ffc10c;}

        .content{margin-top: 8px;}
        .content ul li{padding: 0 10px;background-color: #fff;margin-bottom: 5px;}
        .content ul li .detail-url{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
        .content ul li .con-head{position: relative;padding: 10px 0;}
        .content ul li .con-head .left{float: left;width: 60px;height: 60px;border-radius: 60px;background-size: cover;background-position: center}
        .content ul li .con-head .center{float: left;margin-left: 15px;font-size: 14px;}
        .content ul li .con-head .center .top{}
        .content ul li .con-head .center .top .vip-name{color: #e60014;}
        .content ul li .con-head .center .top .sex{color: #049cce;}
        .content ul li .con-head .center .top .star{color: #fec015;}
        .content ul li .con-head .center .middle{color: #999;margin: 5px 0;}
        .content ul li .con-head .center .bottom{color: #fec015;}
        .content ul li .con-head .right{float: right;color: #999;text-align: right;font-size: 12px;}
        .content ul li .con-head .right .top{font-weight: bold;}
        .content ul li .con-head .right .top span{color: #fff;padding: 3px;border-radius: 3px;}
        .content ul li .con-head .right .top .service{background-color: #a0a0a0;}
        .content ul li .con-head .right .top .ding{background-color: #049cce;}
        .content ul li .con-head .right .middle{margin: 8px 0;}
        .content ul li .con-head .right .bottom{margin-top: 30px;}
        .content ul li .con-foot{overflow: hidden;line-height: 35px;font-size: 13px;}
        .content ul li .con-foot .left{float: left;color: #666;}
        .content ul li .con-foot .right{float: right;}
        .content ul li .con-foot .right .type1{color: #ffc10c;}
        .content ul li .con-foot .right .type2{display: block;background-color: #ffc10c;color: #fff;line-height: 29px;
            margin-top: 3px;padding: 0 10px;border-radius: 3px;}

        .status3{display: none;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">抢到的任务</div>
    </div>
</header>
<div class="switch">
    <div class="item">已抢到</div>
    <div class="item">已完成</div>
    <div class="b-border"></div>
</div>
<div class="content">
    <div class="list status2">
        <ul>
            <li>
                <div class="con-head bottom-line clear">
                    <a href="../html/other_home.html" class="left face" style="background-image: url('../img/pic_renter.png')"></a>
                    <a href="../html/task_detail3.html" class="detail-url"></a>
                    <div class="center">
                        <div class="top">
                            <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                            <span class="sex"><i class="iconfont icon-women"></i></span>
                            <span class="star"><i class="iconfont icon-star2"></i></span>
                        </div>
                        <div class="middle">任务标题</div>
                        <div class="bottom">￥280元</div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <span class="service">生活服务</span>
                            <span class="ding">顶</span>
                        </div>
                        <div class="bottom">05.23</div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <div class="con-foot">
                    <div class="left">任务编号：<span>145435473245465645</span></div>
                    <div class="right">
                        <!--<div class="type1">完成</div>-->
                        <div class="type2">确认完成</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="con-head bottom-line clear">
                    <a href="../html/other_home.html" class="left face" style="background-image: url('../img/pic_renter.png')"></a>
                    <a href="../html/task_detail3.html" class="detail-url"></a>
                    <div class="center">
                        <div class="top">
                            <span class="name">小明</span>
                            <span class="sex"><i class="iconfont icon-women"></i></span>
                            <span class="star"><i class="iconfont icon-star2"></i></span>
                        </div>
                        <div class="middle">任务标题</div>
                        <div class="bottom">￥280元</div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <span class="service">生活服务</span>
                            <span class="ding">顶</span>
                        </div>
                        <div class="bottom">05.23</div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <div class="con-foot">
                    <div class="left">任务编号：<span>145435473245465645</span></div>
                    <div class="right">
                        <!--<div class="type1">完成</div>-->
                        <div class="type2">确认完成</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="list status3">
        <ul>
            <li>
                <div class="con-head bottom-line clear">
                    <a href="../html/other_home.html" class="left face" style="background-image: url('../img/pic_renter.png')"></a>
                    <div class="center">
                        <div class="top">
                            <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                            <span class="sex"><i class="iconfont icon-women"></i></span>
                            <span class="star"><i class="iconfont icon-star2"></i></span>
                        </div>
                        <div class="middle">任务标题</div>
                        <div class="bottom">￥280元</div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <span class="service">生活服务</span>
                            <span class="ding">顶</span>
                        </div>
                        <div class="bottom">05.23</div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <div class="con-foot">
                    <div class="left">任务编号：<span>145435473245465645</span></div>
                    <div class="right">
                        <div class="type1">完成</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="con-head bottom-line clear">
                    <a href="../html/other_home.html" class="left face" style="background-image: url('../img/pic_renter.png')"></a>
                    <div class="center">
                        <div class="top">
                            <span class="name">小明</span>
                            <span class="sex"><i class="iconfont icon-women"></i></span>
                            <span class="star"><i class="iconfont icon-star2"></i></span>
                        </div>
                        <div class="middle">任务标题</div>
                        <div class="bottom">￥280元</div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <span class="service">生活服务</span>
                            <span class="ding">顶</span>
                        </div>
                        <div class="bottom">05.23</div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <div class="con-foot">
                    <div class="left">任务编号：<span>145435473245465645</span></div>
                    <div class="right">
                        <a href="../html/comment.html" class="type2">去评价</a>
                    </div>
                </div>
            </li>
            <li>
                <div class="con-head bottom-line clear">
                    <a href="../html/other_home.html" class="left face" style="background-image: url('../img/pic_renter.png')"></a>
                    <div class="center">
                        <div class="top">
                            <span class="name">小明</span>
                            <span class="sex"><i class="iconfont icon-women"></i></span>
                            <span class="star"><i class="iconfont icon-star2"></i></span>
                        </div>
                        <div class="middle">任务标题</div>
                        <div class="bottom">￥280元</div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <span class="service">生活服务</span>
                            <span class="ding">顶</span>
                        </div>
                        <div class="bottom">05.23</div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <div class="con-foot">
                    <div class="left">任务编号：<span>145435473245465645</span></div>
                    <div class="right">
                        <a href="../html/comment.html" class="type2">去评价</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
<script>
    $('.switch .item').click(function(){
        var _index = $(this).index();
        var _left = _index*50+'%';
        $('.b-border').animate({left:_left});
        $('.list').eq(_index).fadeIn().siblings().hide();
    })
</script>
</html>